<template>
    <div :class="goBackClass" @click="goback">
        <!-- <TechIcon name="goback" :size="20" color="#666" /> -->
        <MiniIcon name="back" :mode="mode" :theme="modeFontColor" :styleMode="styleMode" />
    </div>
</template>

<script>
import { TechIcon, MiniIcon } from '@components/base';
import ModeMixin from '@common/mixin';
export default {
    name: 'GoBack',
    mixins: [ModeMixin],
    components: {
        TechIcon,
        MiniIcon,
    },
    computed: {
        goBackClass() {
            const { haveFooter, mode } = this.$props;
            return `tech-go-back ${haveFooter ? 'have-footer' : ''} ${mode}`;
        },
    },
    props: {
        replaceTo: String,
        haveFooter: {
            type: Boolean,
            default: false,
        },
        isCustomer: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        goback() {
            const { replaceTo, isCustomer } = this.$props;
            if (replaceTo) {
                this.$router.replace(replaceTo);
            } else {
                if (isCustomer) {
                    this.$emit('back');
                } else {
                    this.$router.back();
                }
            }
        },
    },
};
</script>

<style lang="less">
    .tech-go-back {
        z-index: 1999;
        .flex-column-center();
        background-color: @white;
        width: 50px;
        height: 50px;
        position: fixed;
        bottom: 25px;
        bottom: calc(25px + constant(safe-area-inset-bottom));
        bottom: calc(25px + env(safe-area-inset-bottom));
        right: 15px;;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
        border-radius: 50%;
        &.have-footer {
            bottom: 70px;
            bottom: calc(70px + constant(safe-area-inset-bottom));;
            bottom: calc(70px + env(safe-area-inset-bottom));;
        }
        &.black {
            background-color: #000;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
        }
    }
</style>
